<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生端</title>
    <script src="../../js/vue.js"></script>
    <script src="../../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../js/axios-0.18.0.js"></script>
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 580px;
        }
    </style>
</head>
<body>
<div id="app" align="center">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span style="color:#37B328" style="size: A3 ">成 绩 单</span>
            <br><br>
            <span>学生姓名:</span>
            <span>{{resu.stu_nikename}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>&nbsp;班级:</span>
            <span>{{resu.class_name}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>&nbsp;班主任:</span>
            <span>{{resu.tea_class}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>

        <div>
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            align="center"
                            prop="subject_name"
                            label="当前科目">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="subject_total_points"
                            label="当前科目总分">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="stu_score"
                            label="你的得分">
                    </el-table-column>
                </el-table>
            </template>
        </div>
    </el-card>

</div>

<script>
    new Vue({
        el: "#app",
        data: {
            resu: {
                stu_nikename: " ",
                class_name: " ",
                subjectName: "",
                subjectScore: 80,
                subjectCode: 2,
                tea_class: '',

            },
            tableData: [{
                subject_total_points: 0, //当前科目的总分
                stu_score: 0, // 当前科目的得分
                subject_name: 0,  //学科名
            }],
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 == 1) {
                    return 'warning-row';
                } else if (rowIndex % 2 != 1) {
                    return 'success-row';
                }
                return '';
            }
        },
        created() {
            var name = sessionStorage.getItem("username");
            var pwd = sessionStorage.getItem("pwd");
            var states = sessionStorage.getItem("states");
            axios.post("/stu/stuFindAll", {name, pwd, states}).then(resp => {
                console.log(resp);
                if (resp.data.code == 1) {
                    this.resu.stu_nikename = resp.data.data.stu_nikename;
                    this.resu.class_name = resp.data.data.class_name;
                    this.resu.tea_class = resp.data.data.tea_class;  // 班主任
                    this.tableData = resp.data.data.stu_score;
                }else {
                    this.$notify({type: 'error', message: '查询失败！'});
                }
            })

        }
    });
</script>
</body>
</html>